<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
            v-model="searchForm.orderId"
            placeholder="订单号"
            clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
            v-model="searchForm.enterDate"
            type="date"
            placeholder="入库日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
            v-model="searchForm.leaveDate"
            type="date"
            placeholder="入库日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.status" class="filter-item" placeholder="Please select status">
          <el-option v-for="item in statusOption" :key="item.key" :label="item.value" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getExpressList">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-divider><h1>站点包裹记录</h1></el-divider>
    <br><br>
    <div v-if="this.tableData.length===0">
      <el-empty description="没有更多包裹信息咯"></el-empty>
    </div>
    <div v-else>
      <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          stripe>

        <el-table-column
            prop="orderId"
            label="订单号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="enterDate"
            label="入库日期"
            width="200">
          <template slot-scope="scope">
            <el-text>{{scope.row.enterDate | dateFilter}}</el-text>
          </template>
        </el-table-column>
        <el-table-column
            prop="leaveDate"
            label="离库日期"
            width="200">
          <template slot-scope="scope">
            <el-text>{{scope.row.leaveDate | dateFilter}}</el-text>
          </template>
        </el-table-column>

        <el-table-column
            prop="defaults"
            label="当前状态"
            width="150"
        >
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.status===0" type="warning">待揽收</el-tag>
            <el-tag size="small" v-if="scope.row.status===1" type="success">已揽收</el-tag>
          </template>

        </el-table-column>
        <el-table-column
            prop="icon"
            label="操作">

          <template slot-scope="scope">
            <router-link :to="{
              path: '/mew/orderdetail',
              query: {
                orderId: scope.row.orderId
              }
            }">
              <el-button type="text">详情</el-button>
            </router-link>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :current-page="current"
          :page-size="size"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getExpressList} from "@/api/sc";

export default {
  name: "ExpressWrapping",
  data() {
    return {
      searchForm: {
        // orderId: '',
        // enterDate: null,
        // leaveDate: null,
        // status: null
      },
      tableData: [],
      total: 0,
      size: 10,
      current: 1,
      statusOption: [
        { key: null, value: 'ALL'},
        { key: 0, value: '待揽收'},
        { key: 1, value: '已揽收'}
      ]
    }
  },
  created() {
    this.getExpressList()
  },
  methods: {
    getExpressList(){
      getExpressList(this.searchForm).then(res =>{
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })

    },
    handleSizeChange(val) {
      this.size = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getOrderList()
    }
  }
}
</script>

<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>